<template>
    <div class="work">
        <!-- 全局组件 -->
        <headed />
        <div>
            <!-- 显示作业发布时间 -->
            <p class="worktitle"> {{ clicktime }} 部署作业 </p>

            <div class="workbox" v-for="(item, index) in mywork" :key="index">
                <!-- {{item.list.topic_content}} -->
                <div v-for="(item1, index) in item.list" :key="index">
                    <p>
                        <span> {{ item1.topic_type }} </span>
                        <span>（每题 {{ item1.fraction }})</span>
                    </p>
                    <!-- 题目 -->
                    <p> {{ item1.wid }}.{{ item1.topic_content }} </p>
                    <!-- 选项 -->
                    <div class="options">
                        <p>
                            <label>
                                <input type="radio" name="option" data_id="A" @click="checked($event, item1)">
                                A: {{ item1.option_A }}
                            </label>
                        </p>
                        <P>
                            <label>
                                <input type="radio" name="option" data_id="B" @click="checked($event, item1)">
                                B: {{ item1.option_B }}
                            </label>
                        </P>
                        <P>
                            <label>
                                <input type="radio" name="option" data_id="C" @click="checked($event, item1)">
                                C: {{ item1.option_C }}
                            </label>
                        </P>
                        <P>
                            <label>
                                <input type="radio" name="option" data_id="D" @click="checked($event, item1)">
                                C: {{ item1.option_D }}
                            </label>
                        </P>
                    </div>

                    <div class="answer">
                        <p>
                            <span>参考答案： {{ answer }} </span>
                            <span>{{ judge }}</span>
                        </p>
                    </div>

                </div>
            </div>
        </div>
        <foot />
    </div>
</template>

<style lang="less" scoped>
@padding: 20px;

.work {
    .worktitle {
        height: 150px;
        line-height: 150px;
        background: -webkit-linear-gradient(left, rgb(172, 199, 240), rgb(178, 200, 240), rgb(221, 239, 246));
        margin-bottom: 30px;
        font-size: 24px;
        color: #fff;
    }

    .workbox {
        height: auto;
        padding: @padding;
        font-size: 20px;
        font-weight: bold;
        text-align: left;
        box-shadow: @shadow;
        border: 1px solid #c0c0c0;

        &>.options {
            &>p {
                padding: 10px;

                &>label {
                    padding-left: 10px;
                }
            }

        }

        .answer {
            height: 50px;
            line-height: 50px;
            text-align: left;
            padding-left: 10px;
            font-size: 20px;
            font-weight: bold;
            background-color: rgba(245, 245, 245, .5)
        }
    }


}
</style>

<script>
export default {
    data() {
        return {
            //我的作业
            mywork: [],
            answer: '',
            judge: '',
            //登录用户id
            userData: JSON.parse(sessionStorage.getItem("userData")),
            clicktime: this.$route.query.clicktime,

        };
    },
    methods: {
        checked(e, item) {
            //选中的答案
            let option = e.target.getAttribute('data_id')
            //选中的答案和参考答案进行对比
            if (option == item.answer) {
                this.answer = item.answer
                this.judge = "正确"
            } else {
                this.answer = item.answer
                this.judge = "错误"
            }
        }

    },
    mounted() {
        // //拿返回过来的时间去后台取数据
        // this.$http.post('http://test.com:3000/course/clicktimework', {
        //     clicktime:  this.$route.query.clicktime
        // }).then(
        //     res => {
        //         console.log(res.data);
        //     }
        // )
        //我的作业
        this.$http.post('http://test.com:3000/course/mywork', {
            userid: this.userData.user_detail_id
        }).then(
            res => {
                let myworkdata = res.data;
                //定义一个数组作为容器
                let timeDate = []
                for (let i in myworkdata) {
                    //遍历出来的时间
                    let itime = myworkdata[i].release_time;

                    //默认已经存在
                    let isExist = false;
                    let tempIndex = 0;
                    //遍历timeDate 判断是否存在
                    for (let j in timeDate) {
                        if (timeDate[j].time == itime) {
                            isExist = true;
                            tempIndex = j;
                        }
                    }
                    if (!isExist) {
                        //日期不存在，创建日期并赋值空数组
                        timeDate.push({
                            time: itime,
                            status: myworkdata[i].status,
                            list: [myworkdata[i]]
                        })
                    } else {
                        //存放到对应日期的数组中
                        timeDate[tempIndex].list.push(myworkdata[i])
                    }
                }
                this.mywork = timeDate;
            }
        )
    }
};
</script>
